<template>
	<div class="travel-list">
		<ul >
			<li v-for="item in list" :key='item.id'>
				<template  v-if="item.type==1">
					<img :src="item.image"/>
				</template>
				<template   v-else-if="item.type==2">
					<img  :src="item.image"/>
					<p>{{item.title}}</p>
					<article>{{item.name}}</article>
				</template>
				<template   v-else-if="item.type==3">
					<img :src="item.image" />
					<strong>{{item.city}}</strong>
					<p>{{item.title}}</p>
					<article>{{item.name}}</article>
					<label>
						<aside>￥{{item.price}}起</aside>
						<span>{{item.num}}人已报名</span>
					</label>
				</template>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'TravelMenusTab1',
		data(){
			return{	
				list:[
					    {id:1,image:'/fun/img-type-1.1.jpg',type:1},
					    {id:2,image:'/fun/img-2.jpg',type:2,title:'毕棚沟',name:'4060人种草'},
					    {id:3,image:'/fun/img-3.jpg',type:3,title:'[跨年登高 • 四姑娘山嘉年华]登顶5025/5276雪山之巅；双桥沟攀冰初体验；与三获金犀牛攀登大神零距离对话；藏式跨年晚会；赠送登顶证书，5日雪山圆梦之旅！',name:'跟团游·户外游·5天4晚',price:2680,num:17,city:'成都出发'},
					    {id:4,image:'/fun/img-4.jpg',type:3,title:'[田园靖西]11-3月暖冬季：南宁-通灵大峡谷-渠洋湖-靖西鹅泉-德天瀑布-明仕田园，4天3夜深度之旅！（批批入住明仕山庄）',name:'跟团游·美景探索·4天3晚',price:1480,num:5403,city:'南宁出发'},
						{id:5,image:'/fun/img-5.jpg',type:3,title:'[冬游西藏 • 梦幻蓝冰A线]燃灯节特辑招募！普莫雍措-扎寺-珠峰大本营-喜马拉雅-多情措-羊卓雍措！★拉萨3晚四钻酒店，可自选升级洲际！去世界屋脊寻找“蓝精灵”！7日！',name:'跟团游·美景探索·7天6晚',price:2880,num:653,city:'拉萨出发'},
						{id:6,image:'/fun/img-6.jpg',type:3,title:'[内测邀请·牛背山摄影4日]12.18确定成行，阔别六载，牛背山内测；牛背山星辰营地-双流彭镇老茶馆-荥经砂锅，无需徒步上山，4日精品摄影团。',name:'跟团游·摄影游·4天3晚',price:3180,num:16,city:'成都出发'},
						{id:7,image:'/fun/img-7.jpg',type:3,title:'[冰雪九寨环线]12-2月，避开旺季人群纷扰，邂逅冬日静谧九寨黄龙，撒欢毕棚沟，登达古冰川，两晚轻享九寨沟五星度假体验，打卡抖音同款华美达温泉酒店，冬游川西7日深度游！',name:'跟团游·休闲度假·7天6晚',price:4080,num:23,city:'成都出发'},
						{id:8,image:'/fun/img-11.jpg',type:3,title:'[与名师同行 • 西藏桃花]4.7-4.13 本期名师：张力！索松村盛花期连住3天！南迦巴瓦日落金山-桃花人像-美学营地林卡-帕邦喀-羊湖日托寺-普莫雍措-白马林措7日',name:'跟团游·摄影游·7天6晚',price:120,num:21,city:'林芝出发'},
						{id:9,image:'/fun/img-12.jpg',type:3,title:'[牛背山内测计划·星辰营地代订]360°观景平台·正对蜀山之巅：贡嘎雪山/天气好6绝：云瀑星空·日照金山·夕阳佛光·壮美雪山｜轻奢营帐·美景入户·含早餐',name:'自由行·营地·2天1晚',price:780,num:61,city:'牛背山'},
						{id:10,image:'/fun/img-17.png',type:1},
						{id:11,image:'/fun/img-19.jpg',type:2,title:'毕棚沟',name:'4060人种草'},
						{id:12,image:'/fun/img-21.jpg',type:3,title:'[无限风光•老君山]12-2月，赏景圣地老君山&中岳嵩山，千年古刹少林寺，北方溶洞鸡冠洞，伏牛十里画屏，看少林功夫，日出云海星空（4日深度游，河南赏风光）',name:'跟团游·休闲度假·4天3晚',price:1580,num:148,city:'郑州出发'}
					] ,
					count:4,
					isAchiveBottom:false,
					person:[],
				icons:[]	
			}
		},
	}
</script>

<style scoped> 
	.travel-list{
		width: 100%;
	}
	.travel-list ul li{
		width: 48%;
		float: left;
		margin: 0.1rem 0.1rem;
		height: 6.5rem;
		background-color:#fff;
		position: relative;
		border-radius: 0.2rem;
	}
	.travel-list ul li:nth-child(1) img{
		width: 100%;
		height: 100%;
		border-radius: 0.2rem;
	}
	.travel-list ul li:nth-child(2) img{
		width: 100%;
		height: 80%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(2) p{
		font-size: 0.4rem;
		font-weight: bold;
		padding: 0.2rem 0.2rem;
	}
	.travel-list ul li:nth-child(2) article{
		font-size: 0.3rem;
		padding-top: 0.1rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(3) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(3) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(3) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(3) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(3) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(3) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(3) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	.travel-list ul li:nth-child(4) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(4) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(4) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(4) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(4) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(4) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(4) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}	
	.travel-list ul li:nth-child(5) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(5) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(5) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(5) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(5) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(5) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(5) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	
	.travel-list ul li:nth-child(6) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(6) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(6) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(6) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(6) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(6) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(6) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(7) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(7) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(7) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(7) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(7) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(7) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(7) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(8) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(8) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(8) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(8) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(8) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(8) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(8) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(9) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(9) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(9) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(9) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(9) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(9) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(9) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
	
	.travel-list ul li:nth-child(10) img{
		width: 100%;
		height: 100%;
		border-radius: 0.2rem;
	}
	
	.travel-list ul li:nth-child(11) img{
		width: 100%;
		height: 80%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(11) p{
		font-size: 0.4rem;
		font-weight: bold;
		padding: 0.2rem 0.2rem;
	}
	.travel-list ul li:nth-child(11) article{
		font-size: 0.3rem;
		padding-top: 0.1rem;
		padding-left: 0.2rem;
	}
	
	
	.travel-list ul li:nth-child(12) img{
		width: 100%;
		height: 60%;
		border-radius: 0.2rem 0.2rem 0 0;
	}
	.travel-list ul li:nth-child(12) strong{
		position: absolute;
		top: 0;
		left: 0;
		font-size: 0.3rem;
		background-color: #003d62;
		padding: 0.15rem 0.15rem;
		border-radius: 0.2rem 0 0.2rem 0;
		color: white;
	}
	.travel-list ul li:nth-child(12) p{
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 0.4rem;
		padding: 0 0.15rem;
		margin-top: 0.1rem;
	}
	.travel-list ul li:nth-child(12) label{
		display: flex;
		justify-content: space-between;
		margin-top: 0.3rem;
	}
	.travel-list ul li:nth-child(12) label aside{
		font-size: 0.4rem;
		padding-left: 0.2rem;
	}
	.travel-list ul li:nth-child(12) label span{
		font-size: 0.3rem;
		margin-top: 0.05rem;
		padding-right: 0.2rem;
		color: gainsboro
	}
	.travel-list ul li:nth-child(12) article{
		font-size: 0.35rem;
		padding: 0.13rem 0.1rem;
	}
</style>
